<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS clip-path</title>
    <style>
      div {
        margin-bottom: 12px;
      }
      .element-inset {
        width: 50px;
        height: 50px;

        background-color: aquamarine;

        clip-path: inset(5px 10px);
      }

      .element-inset-round {
        width: 50px;
        height: 50px;

        background-color: aquamarine;

        clip-path: inset(10px round 15px);
      }

      .element-circle {
        width: 50px;
        height: 50px;

        background-color: deeppink;

        clip-path: circle(50%);
      }
      .element-circle2 {
        width: 50px;
        height: 50px;

        background-color: deeppink;

        clip-path: circle(closest-side at 25px 25px);
      }
      .element-ellipse {
        width: 50px;
        height: 50px;

        background-color: deepskyblue;

        clip-path: ellipse(10px 20px at center);
      }
      .element-ellipse2 {
        width: 50px;
        height: 50px;

        background-color: deepskyblue;

        clip-path: ellipse(10% 20% at center);
      }
      .element-polygon-triangle {
        width: 50px;
        height: 50px;

        background-color: coral;

        clip-path: polygon(50% 0, 100% 100%, 0 100%);
      }
      .element-polygon-diamond {
        width: 50px;
        height: 50px;

        background-color: hotpink;

        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
      }
      .element-polygon-bubble {
        width: 50px;
        height: 50px;

        background-color: cornflowerblue;

        clip-path: polygon(
          0% 0%,
          100% 0%,
          100% 75%,
          75% 75%,
          75% 100%,
          50% 75%,
          0% 75%
        );
      }

      .element-path {
        width: 200px;
        height: 200px;

        background-color: burlywood;

        clip-path: path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
      }

      .element-url {
        width: 50px;
        height: 50px;

        background-color: tomato;

        clip-path: url(#myCustomClipPath);
      }

      .clip-box {
        margin: 20px;
        border: 10px solid blue;
        padding: 30px;
        width: 200px;
        height: 100px;

        line-height: 100px;
        text-align: center;

        background-color: lightcoral;

        /* 我们将改变这个属性的值 */

        clip-path: circle(25% at center); /* 默认基于 border-box */
      }

      .clip-button {
        width: 100px;
        height: 50px;

        line-height: 50px;
        text-align: center;

        background-color: #4caf50;

        /* 添加过渡效果 */

        transition: clip-path 0.5s ease-in-out;

        cursor: pointer;

        /* 初始状态：圆形 */

        clip-path: circle(40% at 50% 50%);
      }

      .clip-button:hover {
        /* 结束状态：方形（inset矩形） */
        clip-path: inset(0% 0% 0% 0% round 0px); /* 也可以直接用`inset(0)` */
      }
      .animated-element {
        width: 50px;
        height: 50px;

        background-color: #ccc;

        animation: morph 2s infinite ease-in-out alternate;
      }
      @keyframes morph {
        0% {
          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        } /* 菱形 */
        100% {
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        } /* 矩形 */
      }
    </style>
  </head>
  <body>
    <div class="element-inset"></div>
    <div class="element-inset-round"></div>

    <div class="element-circle"></div>
    <div class="element-circle2"></div>

    <div class="element-ellipse"></div>
    <div class="element-ellipse2"></div>

    <div class="element-polygon-triangle"></div>
    <div class="element-polygon-diamond"></div>
    <div class="element-polygon-bubble"></div>

    <div class="element-path"></div>

    <svg width="0" height="0">
      <defs>
        <clipPath id="myCustomClipPath">
          <circle cx="25" cy="25" r="25" />
        </clipPath>
      </defs>
    </svg>

    <div class="element-url"></div>

    <div class="clip-box">Clipping Example</div>

    <div class="clip-button">clip me</div>
    <div class="animated-element"></div>
  </body>
</html>
